<template>
   <el-dialog
    title="培训缴费"
    :visible.sync="visible"
    width="30%"
    :close-on-click-modal='false'
    v-loading='loading'
    >
        <div style="width:100%;">
            <div class="fromitem">
                <span>身份证号</span>
                <el-input placeholder="请输入身份证号" v-model="mumber" class="input">
                    <el-button slot="append" icon="el-icon-search" @click="sacth"></el-button>
                </el-input>
            </div>
            <div class="fromitem" v-if="options.length!=0">
                <span>培训科目</span>
                <el-select v-model="value" placeholder="请选择您要缴费的科目" class="input">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.subjectTitle"
                    :value="item.id">
                    </el-option>
                </el-select>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="submit">培训缴费</el-button>
        </span>
    </el-dialog>
</template>

<script>
import{getapplyInfor}from'@/api/apply.js'
import {mapGetters} from 'vuex'
export default {
    computed:{
        ...mapGetters(['http'])
    },
    data() {
        return {
            visible:false,
            mumber:'',
            options:[],
            loading:false,
            value:'',
        }
    },
    methods: {
        submit(){

        },
        open(){
            this.visible=true
        },
        sacth(){
            let IDCard = /^[1-9]\d{5}(17|18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9X]$/; //身份证号校验
            if(!this.mumber){
                this.$message.warning('身份证号不能为空') 
                return 
            }
            if(!IDCard.test(this.mumber)){
                this.$message.warning('身份证号不合法') 
                return 
            }
            this.loading=true
            getapplyInfor({username:this.mumber}).then(res=>{
                this.loading=false
                if(res.code==200){
                    if(res.data.length==0){
                        this.$confirm('该身份证号所报名的培训科目已缴费，请到学员端登录学习','提示',{
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            showClose:false,
                        }).then(()=>{
                            window.open(this.http+'/user','_self')
                        }).catch(()=>{})  
                    }else{
                      this.options = res.data
                    }
                }
            })  
        }
    },
}
</script>

<style lang="scss" scoped>
    .fromitem{
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom:16px;
        span{
            display: inline-block;
            width:90px;
            font-weight: 600;
            // font-size: 16px;
        }
        .input{
            // flex:1;
            width:50%;
        }
    }
</style>